<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>查询图书日志</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <style>
        .main{
            width:100%;
            height:100%;
            /* background:red;*/
            display:flex;
            flex-wrap: wrap;
            flex-direction:row;
            justify-content: start;
        }
        .query-div{
            display:flex;
            flex-wrap: wrap;
            flex-direction:row;
            justify-content: start;
        }
        .left-menu{
            width:12%;
            height: 90%;
            /*background:yellow;*/
        }
        .right-content{
            width: 85%;
            height:80%;
            margin-left: 32px;
            align-content: center;
            /*   background:blue;*/
        }
        .top-head-color{
            background-color: #50afeb ;

        }
        .margin-top-16{
            margin-top: 16px;
        }

    </style>
</head>
<body>
<%--顶部--%>
<nav class="navbar navbar-default top-head-color" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">图书馆管理系统</a>
        </div>
        <ul class="nav navbar-nav navbar-right">
            <li ><a disabled="disabled"><span class="glyphicon glyphicon-user "></span> 欢迎您，${user.name}</a></li>
            <li ><a href="${pageContext.request.contextPath}/logoutServlet"></span> 注销</a></li>
        </ul>
    </div>
</nav>
<div class="main">
    <%--    左侧菜单栏--%>
    <div class="left-menu">
        <ul class="nav nav-pills nav-stacked">
            <li ><a href="${pageContext.request.contextPath}/bookListServlet">图书管理</a></li>
            <li ><a href="${pageContext.request.contextPath}/getUserList">读者管理</a></li>
            <li><a href="${pageContext.request.contextPath}/bookTypeList">图书分类管理</a></li>
            <li><a href="${pageContext.request.contextPath}/bookBorrowListServlet">图书借阅信息</a></li>
            <li ><a href="${pageContext.request.contextPath}/bookAlreadyReturnedListServlet">图书归还信息</a></li>
            <li class="active"><a href="${pageContext.request.contextPath}/bookBorrowReturnedHistoryListServlet">查询图书日志</a></li>
        </ul>
    </div>
     <script>


     </script>
    <%--    <div style="background-color: #9d9d9d;width: 0.5px;height: 90%"></div>--%>
    <%--    右侧--%>
    <div class="right-content">
        <div class="col-md-10">
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default bootstrap-admin-no-table-panel">
                        <div class="panel-heading">
                            <div class="text-muted bootstrap-admin-box-title">图书借阅历史</div>
                        </div>
                        <div class="col-lg-7 form-group margin-top-16">

                            <form action="${pageContext.request.contextPath}/queryBookBorrowHistoryListServlet" method="post">
                                <div class="col-lg-8">
                                    <input class="form-control"  name="queryBookName" placeholder="输入要查询的书名称" type="text" value="">
                                </div>
                                <input type="submit" class="btn btn-primary" id="query" data-toggle="modal" value="查询" />
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <table id="data_list" class="table table-hover table-bordered" cellspacing="0" width="100%">
                        <thead>
                        <tr>
                            <th>图书号</th>
                            <th>图书名称</th>
                            <th>读者账号</th>
                            <th>读者名称</th>
                            <th>状态</th>
                            <th>借阅日期</th>
                            <th>截止还书日期</th>
                            <th>操作</th>

                        </tr>
                        </thead>
                        <tbody>
                        <c:forEach items="${bookHistoryStatusList}" var="bookHistoryStatus" varStatus="status">
                            <tr>
                                <td>${bookHistoryStatus.card}</td>
                                <td>${bookHistoryStatus.bookname}</td>
                                <td>${bookHistoryStatus.adminname}</td>
                                <td>${bookHistoryStatus.username}</td>
                                <c:if test="${bookHistoryStatus.status==1}">
                                    <td>未归还</td>
                                </c:if>
                                <c:if test="${bookHistoryStatus.status!=1}">
                                    <td>已归还</td>
                                </c:if>
                                <td>${bookHistoryStatus.begintime}</td>
                                <td>${bookHistoryStatus.endtime}</td>
                                <td>
                                    <button type="button" class="btn btn-warning btn-xs" data-toggle="modal" data-target="#updateModal"
                                            id="btn_update" onclick="showInfo('${bookHistoryStatus.card}','${bookHistoryStatus.bookname}','${bookHistoryStatus.adminname}','${bookHistoryStatus.username}','${bookHistoryStatus.begintime}','${bookHistoryStatus.endtime}','${bookHistoryStatus.status}')">查看</button>
                                </td>
                            </tr>
                        </c:forEach>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    </div>
</div>

<form class="form-horizontal" >   <!--保证样式水平不混乱-->
    <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="updateModalLabel">
                        查看图书信息
                    </h4>
                </div>
                <div class="modal-body">

                    <!---------------------表单-------------------->

                    <div class="form-group">
                        <label   class="col-sm-3 control-label">图书号</label>
                        <div class="col-sm-7">
                            <input type="hidden" id="updateBookId" >
                            <input type="text" class="form-control" id="updateCard"   >
                        </div>
                    </div>


                    <div class="form-group">
                        <label  class="col-sm-3 control-label">图书名称</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="updateBookName"   >

                        </div>
                    </div>



                    <div class="form-group">
                        <label  class="col-sm-3 control-label">读者账号</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="updateAdminname" >

                        </div>
                    </div>


                    <div class="form-group">
                        <label  class="col-sm-3 control-label">读者名称</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="updateUsername" >

                        </div>
                    </div>
                    <div class="form-group">
                        <label   class="col-sm-3 control-label">借阅日期</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="updateBegintime" >

                        </div>
                    </div>
                    <div class="form-group">
                        <label   class="col-sm-3 control-label">还书日期</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="updateEndtime" >

                        </div>
                    </div>
                    <div class="form-group">
                        <label   class="col-sm-3 control-label">状态</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="updateStatus" >
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

</form>

<script>

    function showInfo(card,bookname,adminname,Username,Begintime,Endtime,Status) {
        document.getElementById("updateCard").value = card;
        document.getElementById("updateBookName").value = bookname;
        document.getElementById("updateAdminname").value = adminname;
        document.getElementById("updateUsername").value = Username;
        document.getElementById("updateBegintime").value = Begintime;
        document.getElementById("updateEndtime").value = Endtime;
        var statusText="";
        if (Status!=1){
            statusText="已归还";
        }else {
             statusText="未归还";
        }
        document.getElementById("updateStatus").value = statusText;
    }

</script>





</body>
</html>
